<template>
    <div>
        <el-dialog :title="title + '设备'" :visible.sync="dialogVisible" width="600px" @close='close'>
            <div class="dialogBody">
                <el-form :inline="true" :model="form" :rules="rules" label-width="120px" size="mini" ref="form">
                    <el-form-item label="设备名称" prop="deviceName">
                        <el-input v-model="form.deviceName" placeholder="请输入设备名称"></el-input>
                    </el-form-item>
                    <el-form-item label="设备编号" prop="deviceSn">
                        <el-input v-model="form.deviceSn" placeholder="请输入设备编号"></el-input>
                    </el-form-item>
                    <el-form-item label="设备序列号" prop="realDeviceSn">
                        <el-input v-model="form.realDeviceSn" placeholder="请输入设备编号"></el-input>
                    </el-form-item>
                    <el-form-item label="设备管理员" prop="deviceAdmin">
                        <el-select v-model="form.deviceAdmin" filterable remote placeholder="请选择"
                            :remote-method="remoteMethod" @visible-change='visibleChange'>
                            <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备图片">
                        <el-upload action="" list-type="picture-card" :auto-upload='false'
                            :on-change='filesChange'
                            :before-upload="beforeAvatarUpload"
                            :on-preview="handlePictureCardPreview"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            accept=".bmp,.jpg,.png,.tif,.svg,.jpeg"
                            ref="upload"
                            >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="form.remark">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="footer">
                <el-button size="mini" @click='dialogVisible = false'>取 消</el-button>
                <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="picVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {
        userListCopy
    } from '@/api/userController'
    import {
        uploadFile,
        deviceEdit
    } from '@/api/deviceController'
    export default {
        data() {
            return {
                form: {
                    deviceName: '',
                    deviceSn: '',
                    realDeviceSn: '',
                    deviceAdmin: '',
                    devicePic:'',
                    remark: '',
                    groupId: '',
                    id: ''
                },
                rules: {
                    deviceName: [{
                        required: true,
                        message: '设备名称不能为空',
                        trigger: 'blur'
                    }],
                    deviceSn: [{
                        required: true,
                        message: '设备编号不能为空',
                        trigger: 'blur'
                    }],
                },
                userOptions: [],
                file:{},
                fileList:[],
                dialogVisible: false,
                picVisible: false,
                dialogImageUrl: '',
                title: '新建'
            }
        },
        methods: {
            open(payload) {
                const {type,groupId,row} = payload
                this.form.groupId = groupId
                switch (type) {
                    case 'add':
                        this.title = '新建'
                        break;
                    case 'edit':
                        const {deviceName,deviceSn,deviceAdmin,devicePic,remark,id,realDeviceSn} = row
                        this.title = '编辑'
                        this.$nextTick(()=>{
                            this.form.id = id
                            this.form.deviceName = deviceName
                            this.form.deviceSn = deviceSn
                            this.form.realDeviceSn = realDeviceSn
                            this.form.deviceAdmin = deviceAdmin
                            this.form.devicePic = devicePic
                            this.form.remark = remark
                            this.fileList = []
                            devicePic !== null && devicePic !== '' && this.fileList.push({
                                url:this.$global.uploadUrl + devicePic
                            })
                            if(!this.userOptions.length) this.getUserList({name:''})
                        })
                        break;
                }
                this.dialogVisible = true
            },
            close() {
                this.form.id = ''
                this.file = {}
                this.$refs.form.resetFields()
                this.$refs.upload.clearFiles()
            },
            //用户下拉
            getUserList(data) {
                userListCopy(data).then(res => {
                    if (res.code == 200) {
                        this.userOptions = res.data
                    }
                })
            },
            //下拉框打开时
            visibleChange(flag) {
                if (flag) this.remoteMethod('')
            },
            remoteMethod(query) {
                this.getUserList({
                    name: query
                })
            },
            //上传图片
            getUploadFile(data) {
                uploadFile(data).then(res => {
                    if (res.code == 200) {
                        this.form.devicePic = res.data
                        this.getDeviceEdit(this.form)
                    }
                })
            },
            //文件状态改变时的钩子
            filesChange(file, fileList){
                this.file = file
            },
            getDeviceEdit(data) {
                deviceEdit(data).then(res => {
                    if (res.code == 200) {
                        this.dialogVisible = false
                        this.$emit('updateList')
                    }
                })
            },
            //点击文件列表中已上传的文件时的钩子
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url
                this.picVisible = true
            },
            //上传文件之前的钩子
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isLt2M) {
                    this.utils.showMsg('设备图片大小不能超过 2MB!', 'error')
                }
                return isLt2M;
            },
            //文件超出个数限制时的钩子
            handleExceed(files, fileList){
                this.utils.showMsg('图片超出上传限制!', 'error')
            },
            //文件列表移除文件时的钩子
            handleRemove(file){
                this.file = {}
                this.form.devicePic = ''
            },
            //确定
            confirm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        Object.keys(this.file).length ? this.getUploadFile(this.file) : this.getDeviceEdit(this.form)
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form-item--mini.el-form-item {
        width: 90%;

        /deep/ .el-form-item__content {
            width: 60%;
        }

        .el-input-number--mini,
        .el-input--mini,
        .el-select {
            width: 100%;
        }

    }

    /deep/ .el-dialog__body {
        padding: 8px 20px 0 20px;

        .dialogBody {
            padding-top: 18px;
            border: 1px solid #edeef3;
            background: #fbfbfb;
            max-height: 520px;
            overflow-y: auto;

            .el-upload--picture-card {
                width: 100px;
                height: 100px;
                line-height: 100px;
            }

            .el-upload-list--picture-card .el-upload-list__item {
                width: 100px;
                height: 100px;

                img {
                    object-fit: scale-down;
                }
            }
        }
    }

    /deep/ .el-dialog__footer {
        text-align: center;

        .footer {
            .el-button--mini {
                padding: 7px 40px;
            }
        }
    }
</style>